<template>
	<view>
		<!-- 下拉框和搜索框 -->
		<view class="hd">
			<view class="hd-sel">
				<uni-data-select placeholder="全部" v-model="hd_list[0].value" :localdata="hd_list[0].range" @change="change1"></uni-data-select>
			</view>

			<view class="hd-search">
				<u-search
					v-model="searchkeyword"
					placeholder="搜索"
					:clearabled="true"
					:action-style="{ color: '#4095E5' }"
					shape="square"
					bg-color="#fff"
					border-color="#BBBBBB"
					:show-action="false"
				></u-search>
			</view>
		</view>
		<!-- tab栏切换 -->
		<view class="tabs">
			<view class="tabs_hd">
				<u-tabs-swiper
					ref="uTabs"
					:list="tablist"
					:current="current"
					@change="tabsChange"
					:is-scroll="false"
					swiperWidth="100%"
					font-size="34"
					height="60"
					active-color="#00DCB6"
					:show-bar="false"
				></u-tabs-swiper>
			</view>
			<view class="content">
				<!-- 下拉筛选菜单 -->
				<!-- 推荐时出现 -->
				<view class="recom-hd"  v-show="swiperCurrent===0">
					<fy-dropdown :menuList="menuList">
						<fy-dropdown-item
							v-model="synthesisValue"
							dropdownKey="synthesis"
							:options="columnOptions"
							type="column"
							@change="handlerColumnChange"
						></fy-dropdown-item>
						<fy-dropdown-item
							v-model="placeValue"
							dropdownKey="place"
							:options="placeOptions"
							@change="(e) => handlerTypeChange(e, 'place')"
						></fy-dropdown-item>
						<fy-dropdown-item
							v-model="studyValue"
							dropdownKey="study"
							:options="studyOptions"
							@change="(e) => handlerTypeChange(e, 'study')"
						></fy-dropdown-item>
						<fy-dropdown-item
							v-model="termValue"
							dropdownKey="term"
							:options="termOptions"
							@change="(e) => handlerTypeChange(e, 'term')"
						></fy-dropdown-item>
					</fy-dropdown>
				</view>
				<swiper :style="{ height: swiperHeight }" class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<!-- 推荐 -->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<view class="recommend">
								
								<!-- 列表 -->
								<view class="recom-bd">
									<view class="recom-bd-item" v-for="item1 in comList" :key="item1.id">
										<companyList @gotoDetail="gotoDetail" :comList="item1"></companyList>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 收藏 -->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<view class="comcollect">
								<view v-if="JSON.stringify(comCollectList) !== '[]'">
									<view class="comcollect-item" v-for="item2 in comCollectList" :key="item2.id">
										<companyList @gotoDetail="gotoDetail" :comList="item2"></companyList>
									</view>
								</view>
								<view class="nodata" v-else>暂无收藏~</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 收藏 -->
			<!-- 推荐 -->
		</view>

		<!-- 加号弹出层 -->
		<popup></popup>
		<!-- tabbar -->
		<tabbar :tab="1"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框的value
			searchkeyword: '',
			// 存储hd下拉框的选择
			hd_params1: '',
			// hd下拉框选项
			hd_list: [
				{
					value: '',
					range: [
						{ value: '清远市', text: '清远市' },
						{ value: '广州市', text: '广州市' },
						{ value: '深圳市', text: '深圳市' }
					]
				}
			],
			// tabs
			// content高度
			swiperHeight: '',
			// hd高度
			hdHeight: 80,
			tabsHeight: 30,
			// 设备信息
			sysInfo: '',
			// 屏幕宽度
			winWidth: 750,
			tablist: [
				{
					name: '推荐'
				},
				{
					name: '收藏'
				}
			],
			current: 0,
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

			// 下拉筛选菜单
			// 放置选择的数据
			selData: {
				s1: '',
				s2: '',
				s3: '',
				s4: ''
			},
			menuList: [
				{ title: '全部', dropdownKey: 'synthesis' },
				{ title: '地点', dropdownKey: 'place' },
				{ title: '专业', dropdownKey: 'study' },
				{ title: '筛选条件', dropdownKey: 'term' }
			],
			synthesisValue: '',
			columnOptions: [
				{
					title: '地点',
					key: 'p',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '清远市', value: '1' },
						{ text: '广州市', value: '2' },
						{ text: '深圳市', value: '3' }
					]
				},
				{
					title: '专业',
					key: 's',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '软件技术', value: '1' },
						{ text: '现代物流', value: '2' },
						{ text: '食品检测', value: '3' }
					]
				},
				{
					title: '筛选条件',
					key: 't',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '软件技术', value: '1' },
						{ text: '现代物流', value: '2' },
						{ text: '食品检测', value: '3' }
					]
				}
			],
			placeValue: '',
			placeOptions: [
				{ label: '清远市', value: 1 },
				{ label: '广州市', value: 2 },
				{ label: '深圳市', value: 3 }
			],
			studyValue: '',
			studyOptions: [
				{ label: '软件技术', value: 1 },
				{ label: '现代物流', value: 2 },
				{ label: '食品检测', value: 3 },
				{ label: '大数据', value: 4 }
			],
			termValue: '',
			termOptions: [
				{ label: '筛选条件3', value: 1 },
				{ label: '筛选条件33', value: 2 },
				{ label: '筛选条件333', value: 3 }
			],
			// 列表的数据
			comList: [
				{
					id: 1,
					title: '1美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 2,
					title: '2美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 3,
					title: '3美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 4,
					title: '4美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 5,
					title: '5美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 6,
					title: '6美团',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				}
			]
		};
	},
	onLoad() {
		// 获取设备信息
		this.sysInfo = uni.getSystemInfoSync();
		this.winWidth = this.sysInfo.screenWidth;
		this.swiperHeight = (this.sysInfo.windowHeight - 40 - 50) * 2 + 'rpx';
	},
	onReady() {
		uni.createSelectorQuery()
			.select('.tabs_hd')
			.boundingClientRect((data) => {
				this.tabsHeight = data.height;
			})
			.exec();
		// 动态获取可使用窗口高度，设置swiper的高度
		uni.createSelectorQuery()
			.select('.hd')
			.boundingClientRect((data) => {
				this.hdHeight = data.height;
				this.swiperHeight = (this.sysInfo.windowHeight - this.hdHeight - this.tabsHeight - 50) * 2 + 'rpx';
			})
			.exec();
	},

	methods: {
		// 存储hd下拉框的选择数据
		change1(e) {
			this.hd_params1 = e;
		},
		tabsChange(index) {
			// console.log(index);
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {},

		// 下拉筛选菜单
		handlerColumnChange(e) {
			if (e.cancel) return;

			this.columnOptions.forEach((item) => {
				item.default = e.data[item.key];
			});
		},
		handlerTypeChange(e, selType) {
			switch (selType) {
				case 'place':
					this.selData.s2 = e;
					break;
				case 'study':
					this.selData.s3 = e;
					break;
				case 'term':
					this.selData.s4 = e;
					break;
			}
		},

		// 列表
		// 跳去详情页
		gotoDetail(item) {
			// 统一设置收藏为false
			item.collectState = false;
			uni.navigateTo({
				// url要传id参数
				// 加密url参数对象
				url: '/subpkg/company/companyDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		}
	},
	computed: {
		// 获取收藏企业列表的数据
		comCollectList() {
			// 有token才有收藏记录显示
			if (this.$store.state.token) {
				return this.$store.state.m_collect.commpanyList;
			} else {
				return [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.hd {
	display: flex;
	padding: 40rpx;
	font-size: 30rpx;
	
	.hd-sel {
		height: 100%;
		width: 30%;
		margin-right: 20rpx;
		&::v-deep .uni-select {
			height: 80rpx;
			border-color: #bbbbbb;
		}
	}
	.hd-search {
		flex: 1;
		&::v-deep .u-search__content {
			height: 80rpx;
		}
	}
}
.content {
	padding-top: 20rpx;
	.recom-bd {
		padding: 30rpx 40rpx 40rpx;
		.recom-bd-item {
			margin-bottom: 40rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
.comcollect {
	padding: 30rpx 40rpx 40rpx;

	.comcollect-item {
		margin-bottom: 40rpx;
		&:last-child {
			margin-bottom: 0;
		}
	}

	/* 无数据 */
	.nodata {
		width: 100%;
		text-align: center;
		color: #bbbbbb;
	}
}
</style>
